
$(document).ready(function(){
		/*
		*该效果遇到的一个难点在ie6下的布局,由于图片大小全自适应,div.show-btn没办法获取到高度
		*所以大的左右点击按钮就没办法通过css来实现上下居中了
		*解决办法是：_height:expression;//ie所特有css属性.
		*当然如果利用js来控制也就不存在这个问题。主要是考虑到js通常是等页面加载完才执行，
		*所以第用户一眼可能看到的位置是没有居中的，所以想通过css来实现.
		*/
	
/*	alert("ss=dfdf="+$("#commentDiv").text());
	var aa = $("#mainMyOrder").find(".slider").attr("id");
	alert("aaa=ffff==+"+aa);*/
	/*$("#commentDiv .slider").each(function(){
		alert("fhdgksh-+__)*(Y^&%$&**(*^%$%^&*$##&^($)_#hfdgtjdgf");
		alert($(this).attr("id"));
		
	});*/
	
	var oSliderPic=$('#slider1'),
	oShowBox=oSliderPic.find('#show-box1'),
	oShowPrev=oSliderPic.find('#show-prev1'),
	oShowNext=oSliderPic.find('#show-next1'),
	/*oMinPrev=oSliderPic.find('#min-prev1'),*/
	/*oMinNext=oSliderPic.find('#min-next1'),*/
	oMinBoxList=oSliderPic.find('#min-box-list1'),
	aShowBoxLi=oShowBox.find('li'),
	aMinBoxLi=oMinBoxList.find('li'),
	iMinLiWidth=aMinBoxLi.first().outerWidth(),
	iNum=aMinBoxLi.length
    //判断总共有多少张图片，不够4张没有左右按钮		
	if(iNum>0 && iNum<4){
//		oMinPrev.css('display','none');
//		oMinNext.css('display','none');
		if(iNum == 1){
			oShowPrev.css('display','none');
			oShowNext.css('display','none');
		}
		}
	
	//根据小图片的多少来计算出父容器的宽度,让其显示成一行
	oMinBoxList.css('width',iNum*iMinLiWidth+'px');

	//由于ie6 不支持max-width 所以设置图片的最大显示宽度 注意ie6下的css图片设置的宽度为100%,所以这里设置li即可
	var isIE6=!-[1,]&&!window.XMLHttpRequest;
	if(isIE6)  
	{
		for(var i =0;i<iNum;i++)
		{
			var o=aShowBoxLi.eq(i)
			o.css({width:o.outerWidth() > 643 ? 643 : o.outerWidth(),float:'none',margin:'0 auto'})
		}
	}

	oShowPrev.hover(function(){
		//采用链式操作减少dom操作.
		$(this).css({backgroundColor:'#F5F5F5'}).find('span').css({backgroundPosition:'-20px -47px'})
	},function(){
		$(this).css({backgroundColor:'#fff'}).find('span').css({backgroundPosition:'-20px 0px'})
	})
	oShowNext.hover(function(){
		$(this).css({backgroundColor:'#F5F5F5'}).find('span').css({backgroundPosition:'-89px -47px'})
	},function(){
		$(this).css({backgroundColor:'#fff'}).find('span').css({backgroundPosition:'-89px 0px'})
	})

	//键盘左右方向箭控制图片显示  (这里采用原生js)
	document.onkeyup=function(ev) {
		var o=window.event || ev; //获取事件对象
		if(o.keyCode==37) {
			changePrev()
		}
		else if(o.keyCode==39) {
			changeNext()
		}
	}

	//小图片列表添加点击事件
	aMinBoxLi.click(function(){
		var index=$(this).index();
		iNow=index;
		setLayout();//回调样式及动画函数
	})

	//左右按钮添加点击  回调
//	oMinPrev.click(changePrev);
//	oMinNext.click(changeNext);
	oShowPrev.click(changePrev);
	oShowNext.click(changeNext);

	function changePrev()
	{   //iNow相当于下标索引，固下标索引不能小于0
		if(iNow<=0)
		{
			return;
		}
		iNow--;
		setLayout()
	}
	function changeNext()
	{
		if(iNow>=iNum-1)
		{
			return;
		}
		iNow++;
		setLayout();
	}

	//设置显示样式及动画
	function setLayout()
	{
		var oCurLi = aShowBoxLi.eq(iNow);
		aShowBoxLi.hide().eq(iNow).fadeIn('normal');
		oShowBox.css("display","block");
		aMinBoxLi.removeClass("cur").eq(iNow).addClass("cur");
		/*if(iNow>2){
		    aMinBoxLi.eq(iNow-3).hide().eq(iNow).fadeIn("normal");
		}else{
			aMinBoxLi.eq(iNow+1).hide().eq(iNow).fadeIn("normal");
		}*/
		//限制图片运动距离，以免出现空白.
		if(iNow>=4 && iNow< iNum-4) 
		{
			oMinBoxList.animate({left:-iMinLiWidth*(iNow-4)},100)
		}
	}
			
		var oSliderPic2=$('#slider2'),
			oShowBox2=oSliderPic2.find('#show-box2'),
			oShowPrev2=oSliderPic2.find('#show-prev2'),
			oShowNext2=oSliderPic2.find('#show-next2'),
//			oMinPrev2=oSliderPic2.find('#min-prev2'),
//			oMinNext2=oSliderPic2.find('#min-next2'),
			oMinBoxList2=oSliderPic2.find('#min-box-list2'),
			aShowBoxLi2=oShowBox2.find('li'),
			aMinBoxLi2=oMinBoxList2.find('li'),
			iMinLiWidth2=aMinBoxLi2.first().outerWidth(),
			iNum2=aMinBoxLi2.length
			
            //判断总共有多少张图片，不够4张没有左右按钮		
			if(iNum2>0 && iNum2<4){
//				oMinPrev2.css('display','none');
//				oMinNext2.css('display','none');
				if(iNum2 == 1){
					oShowPrev2.css('display','none');
					oShowNext2.css('display','none');
				}
				}
			
			//根据小图片的多少来计算出父容器的宽度,让其显示成一行
			oMinBoxList2.css('width',iNum2*iMinLiWidth2+'px');

			//由于ie6 不支持max-width 所以设置图片的最大显示宽度 注意ie6下的css图片设置的宽度为100%,所以这里设置li即可
			var isIE62=!-[1,]&&!window.XMLHttpRequest;
			if(isIE62)  
			{
				for(var i =0;i<iNum2;i++)
				{
					var o=aShowBoxLi2.eq(i)
					o.css({width:o.outerWidth() > 643 ? 643 : o.outerWidth(),float:'none',margin:'0 auto'})
				}
			}

			oShowPrev2.hover(function(){
				//采用链式操作减少dom操作.
				$(this).css({backgroundColor:'#F5F5F5'}).find('span').css({backgroundPosition:'-20px -47px'})
			},function(){
				$(this).css({backgroundColor:'#fff'}).find('span').css({backgroundPosition:'-20px 0px'})
			})
			oShowNext2.hover(function(){
				$(this).css({backgroundColor:'#F5F5F5'}).find('span').css({backgroundPosition:'-89px -47px'})
			},function(){
				$(this).css({backgroundColor:'#fff'}).find('span').css({backgroundPosition:'-89px 0px'})
			})

			//键盘左右方向箭控制图片显示  (这里采用原生js)
			document.onkeyup=function(ev) {
				var o=window.event || ev; //获取事件对象
				if(o.keyCode==37) {
					changePrev2()
				}
				else if(o.keyCode==39) {
					changeNext2()
				}
			}

			//小图片列表添加点击事件
			aMinBoxLi2.click(function(){
				var index=$(this).index();
				iNow=index;
				setLayout2();//回调样式及动画函数
			})

			//左右按钮添加点击  回调
//			oMinPrev2.click(changePrev2);
//			oMinNext2.click(changeNext2);
			oShowPrev2.click(changePrev2);
			oShowNext2.click(changeNext2);

			function changePrev2()
			{   //iNow相当于下标索引，固下标索引不能小于0
				if(iNow<=0)
				{
					return;
				}
				iNow--;
				setLayout2()
			}
			function changeNext2()
			{
				if(iNow>=iNum2-1)
				{
					return;
				}
				iNow++;
				setLayout2();
			}

			//设置显示样式及动画
			function setLayout2()
			{
				var oCurLi = aShowBoxLi2.eq(iNow);
				aShowBoxLi2.hide().eq(iNow).fadeIn('normal');
				oShowBox2.css("display","block");
				aMinBoxLi2.removeClass("cur").eq(iNow).addClass("cur");
				/*if(iNow>2){
				    aMinBoxLi2.eq(iNow-3).hide().eq(iNow).fadeIn("normal");
				}else{
					aMinBoxLi2.eq(iNow+1).hide().eq(iNow).fadeIn("normal");
				}*/
				//限制图片运动距离，以免出现空白.
				if(iNow>=4 && iNow< iNum2-4) 
				{
					oMinBoxList2.animate({left:-iMinLiWidth2*(iNow-4)},100)
				}
			}
	});